<template>
  <div class="waybill-detail">
    <el-card class="order-top">
      <el-row>
        <el-col :span="6">订单编号：<span>{{ transportOrder.orderId }}</span></el-col>
        <el-col :span="6">运单编号：<span>{{ transportOrder.id }}</span></el-col>
        <el-col :span="6">下单时间：<span v-if="transportOrder.order">{{ transportOrder.order.createTime }}</span></el-col>
        <el-col :span="6">订单状态：<span>{{ '已签收' }}</span></el-col>
        <el-col :span="6">预计到达日期：<span v-if="transportOrder.order">{{ transportOrder.order.estimatedArrivalTime }}</span></el-col>
      </el-row>
    </el-card>
    <el-collapse value="1">
      <el-collapse-item title="基本信息" name="1">
        <el-timeline>
          <el-timeline-item icon="el-icon-location-information">
            <div style="font-size:16px">发货方</div>
            <div style="display:flex;font-size:14px">
              <div>
                <div style="margin:10px 0">发货方姓名：<span style="color:#818693">{{ orderInfo.senderName }}</span></div>
                <div>发货方地址：<span style="color:#818693">{{ senderAddress }}</span></div>
              </div>
              <div style="margin-left:147px">
                <div style="margin:10px 0">发货方电话：<span style="color:#818693">{{ orderInfo.senderPhone }}</span></div>
                <div>详细地址：<span style="color:#818693">{{ orderInfo.senderAddress }}</span></div>
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
        <el-timeline>
          <el-timeline-item icon="el-icon-help">
            <div style="font-size:16px">收货方</div>
            <div style="display:flex;font-size:14px">
              <div>
                <div style="margin:10px 0">发货方姓名：<span style="color:#818693">{{ orderInfo.receiverName }}</span></div>
                <div>发货方地址：<span style="color:#818693">{{ receiverAddress }}</span></div>
              </div>
              <div style="margin-left:147px">
                <div style="margin:10px 0">发货方电话：<span style="color:#818693">{{ orderInfo.receiverPhone }}</span></div>
                <div>详细地址：<span style="color:#818693">{{ orderInfo.receiverAddress }}</span></div>
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </el-collapse-item>
    </el-collapse>
    <el-collapse value="1">
      <el-collapse-item title="运输信息" name="1">
        <el-steps :space="200" :active="7" finish-status="success" align-center>
          <el-step
            v-for="item in transportLine.nodeList"
            :key="item.bid"
            :title="item.name"
          >
            <template #description>
              <div />
            </template>
          </el-step>

        </el-steps>
      </el-collapse-item>
    </el-collapse>
    <el-collapse value="1">
      <el-collapse-item title="货品信息" name="1">
        <el-table
          :data="orderInfo.orderCargoDTOS"
          stripe
          show-summary
          :header-cell-style="{background:'#f8faff',color:'#818693'}"
        >
          <el-table-column type="index" label="序号" />
          <el-table-column prop="name" label="货品名称" />
          <el-table-column prop="goodsType" label="货品类型">
            <template #default="{row}">
              <span>{{ row.goodsType.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="totalWeight" label="重量(千克)" />
          <el-table-column prop="volume" label="体积(立方)" />
        </el-table>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { getTransportOrderDetail } from '@/api/business'
import setMap from '@/constant/setMap'

export default {
  // filters: {
  //   showOrderStatus(val) {
  //     return setMap.orderStatus.find(item => item.id === val).label
  //   }
  // },
  data() {
    return {
      setMap,
      transportOrder: {},
      orderInfo: {},
      activeNames: [],
      transportLine: {}
    }
  },
  computed: {
    senderAddress() {
      if (!this.orderInfo.senderProvince) return
      return this.orderInfo.senderProvince.name + this.orderInfo.senderCity.name + this.orderInfo.senderCounty.name
    },
    receiverAddress() {
      if (!this.orderInfo.receiverProvince) return
      return this.orderInfo.receiverProvince.name + this.orderInfo.receiverCity.name + this.orderInfo.receiverCounty.name
    }
  },
  created() {
    this.initTransportOrderDetail()
  },
  methods: {
    async initTransportOrderDetail() {
      const res = await getTransportOrderDetail(this.$route.query.id)
      this.transportOrder = res
      this.orderInfo = res.order
      this.transportLine = JSON.parse(res.transportLine)
    }
  }
}
</script>

<style lang="scss" scoped>
.waybill-detail{
    .el-col-6{
      margin: 12px 0;
      font-size: 14px;
      font-weight: normal;
      color: #20232a;
      span{
        color:#818693;
        font-size: 14px;
      }
    }
  .el-card{
    margin: 12px;
    ::v-deep .el-card__body{
      padding: 20px 44px;
    }
  }
  .el-collapse{
    margin: 12px;
   ::v-deep .el-collapse-item__header{
    padding: 0 44px;
    height: 60px;
    line-height: 60px;
    border-radius: 4px 4px 0 0;
    background-color: #f8faff;
    cursor: pointer;
    font-weight: 700;
    font-size: 16px;
    }
    ::v-deep .el-collapse-item__content{
      padding: 24px 40px;
    }
   ::v-deep .el-timeline{
      .el-timeline-item__node--normal{
        top: 5px;
      }
      .el-timeline-item__icon{
        top: 10px;
        color: blue;
        font-size: 16px;
      }
      .el-icon-help{
        color: red;
      }
    }
  }
 ::v-deep .el-steps{
    .el-step__head{
      .el-step__line{
        top: 20px;
        height: 0;
        border: 1px solid #419eff;
      }
      .el-step__icon{
        width: 40px;
        height: 40px;
        border: 1px solid #419eff;
        color: #419eff;
      }
    }
    .el-step__title{
      font-size: 14px;
      font-weight: 400;
      color: #20232a;
    }
  }
}
</style>
